'use client';
import PropertyListItem from "@/app/components/properties/PropertyListItem";
import { useEffect, useState } from "react";

export type PropertyType = {
    id: string;
    title: string;
    description: string;
    price_per_night: number;
    bedrooms: number;
    bathrooms: number;
    guests: number;
    country: string;
    country_code: string;
    category: string;
    image: string;
    image_url: string;
    landlord: string;
    created_at: string;
    updated_at: string;
}

const PropertyList = () => {
    const [properties, setProperties] = useState<PropertyType[]>([]);
    const getProperties = async () => {
        const url = 'http://localhost:8000/api/properties/'
        const res = await fetch(url, {
            method: 'GET',
        });

        try {
            const data = await res.json();
            console.log(data);
            setProperties(data.data)
        } catch (error) {
            console.log(error);
        }
    }
    useEffect(() => {
        getProperties();
    }, []);
    return (
        <>
            {
                properties && properties.map((property) => (
                    <PropertyListItem key={property.id} property={property} />
                ))
            }
        </>
    )
}

export default PropertyList;
